<template>
    <div class="category_box">
        <div class="category" v-for="item in navigationForm">
            <img class="category_Img" :src="item.logo">
            <span class="category_Name">{{item.name}}</span>
        </div>
    </div>
</template>

<script>
import { list } from "@/api/navigation";
import { mapGetters } from "vuex";
import utils from "../../../../utils/utils.js";
export default {
    data() {
        return {
            navigationForm: [
                {
                    name: "天猫新品",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%A4%A9%E7%8C%AB.png",
                },
                {
                    name: "充值中心",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%85%85%E5%80%BC.png",
                },
                {
                    name: "淘鲜达",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%B5%B7%E9%B2%9C.png",
                },
                {
                    name: "分类",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%9B%B4%E5%A4%9A%E5%88%86%E7%B1%BB.png",
                },
            ],
            pageNum: 1,
            pageSize: 4,
            tagIds: [],
        };
    },
    created() {
        this.loadNavigation();
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    props: ["content"],
    methods: {
        loadNavigation() {
            var _this = this;
            console.log(this.content);
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < _this.tagIds.length; i++) {
                    _this.tagIds[i] = parseInt(_this.tagIds[i]);
                }
            }
            _this.pageSize = _this.content.rows;
            if (_this.pageSize > 5) {
                _this.pageSize = 5;
            }
            let params = new URLSearchParams();
            params.append("pageNum", _this.pageNum);
            params.append("pageSize", _this.pageSize);
            params.append("mchId", this.mchId);
            for (var i = 0; i < _this.tagIds.length; i++) {
                params.append("tagIds", _this.tagIds[i]);
            }
            list(params)
                .then((response) => {
                    response.data.data.forEach((item) => {
                        if (utils.isNull(item.logo)) {
                            item.logo =
                                "http://cdnx.hulu.fj.cn/upload/20200624/4.png";
                        }
                        if (utils.isNull(item.name)) {
                            item.name = "专家评估";
                        }
                    });
                    console.log(response);
                    if (response.data.data.length > 0) {
                        _this.navigationForm = response.data.data;
                    }
                    _this.navigationForm.forEach(function (item) {
                        item.logo = utils.thumbnail(item.logo, 270, 200);
                    });
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
    },
};
</script>

<style scoped>
.category_box {
    width: 355px;
    padding-top: 25px;
    padding-left: 11px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 10px;
}

.category {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*width: 88px;*/
    flex-grow: 1;
    margin-bottom: 25px;
}

.category_Img {
    width: 36px;
    height: 36px;
}

.category_Name {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(43, 43, 43, 1);
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 8px;
}
</style>
